<template>
	<view class="container">
		<view class="form">
			<uni-forms ref="updatePasswordRef" :modelValue="formData">
				<uni-forms-item name="email">
					<view class="captcha">
						<uni-easyinput disabled v-model="formData.email"></uni-easyinput>
						<button :loading="isLoading" :disabled="isCounting" style="background-color: #ebf5ff" size="mini" type="primary" plain @click="sendCaptcha">
							{{ isCounting ? `重新发送(${count}s)` : '发送验证码' }}
						</button>
					</view>
				</uni-forms-item>
				<uni-forms-item name="captcha">
					<uni-easyinput v-model="formData.captcha" placeholder="请输入验证码"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item name="password1">
					<uni-easyinput v-model="formData.password1" type="password" placeholder="请输入新密码"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item name="password2">
					<uni-easyinput v-model="formData.password2" type="password" placeholder="请再次输入新密码"></uni-easyinput>
				</uni-forms-item>
			</uni-forms>
		</view>
		<button type="primary" @click="onSubmit">完成</button>
	</view>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { getInfo, sendUpdatePasswordCaptcha, updatePassword } from '../../api/user';
const count = ref(30); // 倒计时秒数
const isCounting = ref(false); // 是否在倒计时中
const isLoading = ref(false);
const formData = reactive({
	email: '',
	captcha: '',
	password1: '',
	password2: ''
});
const updatePasswordRef = ref(null);
const getUserInfo = async () => {
	const res = await getInfo();
	formData.email = res.data.email;
};
onLoad(() => {
	getUserInfo();
});

const sendCaptcha = async () => {
	isLoading.value = true;
	const res = await sendUpdatePasswordCaptcha({ address: formData.email });
	uni.showToast({
		title: res.data,
		icon: 'success',
		position: 'top'
	});
	isLoading.value = false;
	if (isCounting.value) return;
	isCounting.value = true;
	count.value = 30;

	const timer = setInterval(() => {
		count.value--;
		if (count.value <= 0) {
			clearInterval(timer);
			isCounting.value = false;
		}
	}, 1000);
};

const onSubmit = async () => {
	updatePasswordRef.value.validate().then(async (res) => {
		if (formData.password1 !== formData.password2) {
			uni.showToast({
				title: '密码不一致，请重新输入',
				icon: 'none',
				position: 'top'
			});
			(formData.password1 = ''), (formData.password2 = '');
			return;
		}
		if (!formData.password1 || !formData.password2) {
			uni.showToast({
				title: '密码不能为空',
				icon: 'none',
				position: 'top'
			});
			return;
		}
		const newRes = await updatePassword({
			email: formData.email,
			captcha: formData.captcha,
			password: formData.password1
		});
		uni.showToast({
			title: '更改密码成功！请重新登录！',
			icon: 'none'
		});
		uni.removeStorageSync('access_token');
		uni.removeStorageSync('refresh_token');
		uni.removeStorageSync('user_info');
		setTimeout(() => {
			uni.navigateTo({
				url: '/pages/login/login'
			});
		}, 1500);
		registerRef.value.resetFields();
	});
};
</script>

<style lang="scss" scoped>
body {
	background-color: #f8f8f8;
}
.container {
	.form {
		margin-top: 20rpx;
		margin-bottom: 60rpx;
		:deep(.uni-easyinput__content input:focus) {
			outline: none !important; /* 取消外边框 */
			border: none !important; /* 取消边框 */
			box-shadow: none !important; /* 取消阴影 */
		}
		.captcha {
			display: flex;
		}
		.uni-forms-item {
			margin-bottom: 0;
		}
		.uni-forms-item:nth-child(2) {
			margin-bottom: 40rpx;
		}
	}
}
</style>
